<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,table tr, table td{
            border: 1px solid black;
            border-collapse: collapse;

        }
    </style>
</head>

<body>
    <div id="demo01">
        <div id="txt01"></div>
        <div id="txt02"></div>
    </div>
    <p></p>
    <div id="demo02">
        年份：<select name="" id="mySelect-year">
            <option value=""></option>
        </select>
        月份：<select name="" id="mySelect-month"></select>
    </div>
    <p></p>
    <div id="demo03">
        <table id="demo03-table">
        </table>
    </div>
    <script>
        // 综合练习1
        let BMI = 23;
        document.getElementById('txt01').innerHTML = 'BMI：23';
        if (BMI < 20) {
            document.getElementById('txt02').innerHTML = '结果：体重过轻';
        }
        else if (BMI >= 20 && BMI < 25) {
            document.getElementById('txt02').innerHTML = '结果：体重适中';
        }
        else if (BMI >= 25 && BMI < 30) {
            document.getElementById('txt02').innerHTML = '结果：体重过重';
        }
        else if (BMI >= 30 && BMI < 35) {
            document.getElementById('txt02').innerHTML = '结果：肥胖';
        }
        else if (BMI > 35) {
            document.getElementById('txt021').innerHTML = '结果：非常肥胖';
        }

        // 综合练习2
        // 1.获取要插入数据DOM的id
        const yearId = document.getElementById("mySelect-year");
        const monthId = document.getElementById("mySelect-month");
        // 2.循环将数据存入数组中
        const year = [];
        const month = [];
        for (let i = 1949; i <= 2025; i++) {
            year.push(i);
        }
        for (let i = 1; i <= 12; i++) {
            month.push(i)
        }
        // 3.将要插入的数据和标签整合为一串字符
        let optionYearTxt = '';
        for (let i = 0; i < year.length; i++) {
            optionYearTxt += `<option value="${year[i]}">${year[i]}</option>`;
        }
        let optionMonthTxt = '';
        for (let i = 0; i < month.length; i++) {
            optionMonthTxt += `<option value="${month[i]}">${month[i]}</option>`;
        }
        // 4. 插入指定DOM
        yearId.innerHTML = optionYearTxt;
        monthId.innerHTML = optionMonthTxt;

        //  综合练习3
        const number = [];
        for (let i = 1; i <= 10; i++) {
            number.push(i);
        }
        const tableId = document.getElementById('demo03-table')
        let numberTxt = '';
        for (let i = 0; i <= 9; i++) {
            numberTxt += '<tr>';
            for (let j = 1; j <= 10; j++) {
                if (j != 10) {
                    numberTxt += `<td>${i}${j}</td>`;
                    continue;
                } else {
                    numberTxt += `<td>${j * (i + 1)}</td>`
                }
            }
            numberTxt += '</tr>';
        }
        tableId.innerHTML = numberTxt;
    </script>
</body>

</html>